<template>
  <div class="leftComp">
    <!-- 循环天 -->
    <div class="day-all-box">
      <div class="left-day">
        <draggable v-model="dataNewDay" :options="{group:'people'}" @change="change">
          <div
            v-for="(dayItem, dayIndex) in dataNewDay"
            :key="dayIndex"
            style="margin: 5px 0;position: relative"
          >
            <el-button size="mini" type="warning" style="width: 100%">第{{dayIndex+1}}天</el-button>
            <el-popover placement="top" width="160" v-model="dayItem.IsDel" v-show="mainOption.operate === 'show'?false:true">
              <p>确定删除内容吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="dayItem.IsDel = false">取消</el-button>
                <el-button type="primary" size="mini" @click="dayDel(dayIndex)">确定</el-button>
              </div>
              <span
                class="el-icon-error"
                slot="reference"
                style="position: absolute;top:0;right:0;color: salmon;font-size: 20px;transform: translateX(40%) translateY(-40%)"
              ></span>
            </el-popover>
          </div>
        </draggable>
      </div>
      <!-- right内容 -->
      <div class="outer-everyPoint">
        <div v-for="(dayItem, dayIndex) in dataNewDay" :key="dayIndex" class="everyPoint">
          <el-button size="mini" style="height:28px;">第{{dayIndex+1}}天</el-button>
          <div style="min-width: 100px;">
            <draggable
              v-model="dayItem.point"
              :options="{group:'people'}"
              @change="(e) => pointChange(e, dayIndex)"
            >
              <div
                v-for="(pointItem, pointIndex) in dayItem.point"
                :key="pointIndex"
                style="margin: 10px 0;display: flex;position:relative"
              >
                <div style="display: flex;align-items: center;">
                  <span>{{pointIndex+1}}.</span>
                </div>
                <!-- point-box -->
                <el-button
                  size="mini"
                  type="warning"
                  style="width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
                >{{pointItem.title}}</el-button>
                <el-popover placement="top" width="160" v-model="pointItem.IsDel" v-show="mainOption.operate === 'show'?false:true">
                  <p>确定删除内容吗？</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="pointItem.IsDel = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="pointDel(dayIndex, pointIndex)">确定</el-button>
                  </div>
                  <span
                    class="el-icon-error"
                    slot="reference"
                    style="position: absolute;top:0;right:0;color: salmon;font-size: 20px;transform: translateX(40%) translateY(-40%)"
                  ></span>
                </el-popover>
              </div>
            </draggable>
          </div>
          <div class="addPointBtn">
            <el-button type="primary" size="mini" @click="addPoint(dayIndex)">添加游玩点</el-button>
          </div>
        </div>
      </div>
    </div>

    <el-button type="primary" class="addOneDay" size="mini" @click="addOneDay">添加一天</el-button>
    <!-- :option-text="optionText"  :point-in-resource-data="pointResourceOption.data"-->
    <img-text
      :push-point-state-num="pushPointStateNum"
      @transmit-imgtextdata="transmitImgTextData"
      :cropper-option-data="cropperOptionData"
      :rules-resource="rulesResource"
      :point-resource-option="pointResourceOption"
      ref="leftAddPoint"
      :point-title-max="pointTitleMax"
      :main-option="mainOption"
    ></img-text>
  </div>
</template>
<script>
module.exports = {
  name: "leftComp",
  data() {
    return {
      msg: "这是msg信息",
      clickMsg: "clickMsg",
      pushPointStateNum: 0,
      nowIndex: 0,
      dataNewDay: Object.assign([], this.day)
    };
  },
  computed: {
    dataDay() {
      return Object.assign([], this.day);
    }
  },
  props: {
    pointResourceOption: {
      type: Object,
      default: () => {
        return {};
      }
    },
    mainOption: {
      type: Object,
      default: () => {
        return {};
      }
    },
    pointTitleMax: {
      type: Number,
      default: 0
    },
    // point in 资源选择数据
    pointInResourceData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 资源是否必填
    rulesResource: {
      type: Array,
      default: () => {
        return [];
      }
    },
    cropperOptionData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    day: {
      default: () => {
        return []
      },
      typr: Array
    }
  },
  watch: {
    day(now, old) {
      console.log(now, "nbow");
      this.dataNewDay = now;
    }
  },
  components: {
    "img-text": httpVueLoader("./img-text.vue")
  },
  mounted() {
    this.$on("remote-method", () => {
      console.log("loading");
    });
    // console.log(this.$children, "this.$children");
  },
  methods: {
    pointDel(dayIndex, pointIndex) {
      this.dataNewDay[dayIndex].point.splice(pointIndex, 1);
    },
    dayDel(dayIndex) {
      this.dataNewDay.splice(dayIndex, 1);
    },
    change(e) {
      const dataNewDay = this.dataNewDay;
      this.$emit("transmit-draggable-left-daydata", {
        dataNewDay
      });
    },
    pointChange(e, dayIndex) {
      const dataNewDay = this.dataNewDay;
      // const dataNewDay = this.day;
      // this.day = this.dataNewDay
      this.$set(this, "day", this.dataNewDay);
      const point = this.dataNewDay[dayIndex].point;
      this.$emit("transmit-draggable-left-daydata", {
        dataNewDay,
        point,
        dayIndex
      });
    },
    transmitImgTextData(obj) {
      const index = this.nowIndex;
      this.$emit("transmit-leftcompdata", { obj, index });
    },
    addPoint(dayIndex) {
      if (this.mainOption.operate !== "show") {
        this.$refs.leftAddPoint.pushPointState = true;
        this.nowIndex = dayIndex;
        // this.pushPointStateNum++;
        this.$emit("transmit-add-point", dayIndex);
      }
    },
    // 添加一天
    addOneDay() {
      if(this.mainOption.operate !== 'show'){
        this.$emit("transmit-add-day-btn");
      }
    }
  }
};
</script>
<style scoped>
.leftComp {
  width: 100%;
}
.everyPoint {
  flex: 5;
  padding: 15px 10px;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  border-bottom: 1px solid salmon;
}
.left-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.day-all-box {
  display: flex;
}
.outer-everyPoint {
  flex: 5;
}
</style>